window.addEventListener('load',function() {
	var preview_img = document.querySelector('.preview_img');
	var mask = document.querySelector('.mask');
	var big = document.querySelector('.big');
	
	preview_img.addEventListener('mouseover',function() {
		mask.style.display = 'block';
		big.style.display = 'block';
	})
	preview_img.addEventListener('mouseout',function() {
		mask.style.display = 'none';
		big.style.display = 'none';
	})
	
	preview_img.addEventListener('mousemove',function(e) {
		var x = e.pageX - this.offsetLeft;
		var y = e.pageY - this.offsetTop;
		//mask移动距离
		var maskX = x - mask.offsetWidth / 2;
		var maskY = y - mask.offsetHeight / 2;
		//如果x,y的坐标小于0 停止在0的位置
		var maskXMax =  preview_img.offsetWidth - mask.offsetWidth;
		var maskYMax = preview_img.offsetHeight - mask.offsetHeight;
		if(maskX <= 0) {
			maskX = 0;
		} else if(maskX >= maskXMax) {
			maskX = maskXMax;
		}
		if(maskY <= 0) {
			maskY = 0;
		} else if(maskY >= maskYMax) {
			maskY = maskYMax;
		}
		mask.style.left = maskX + 'px';
		mask.style.top = maskY +  'px';
		
		//大图片移动距离 = 遮挡层移动距离 * 大图片最大移动距离 / 遮挡层最大移动距
		
		var bigIMg =document.querySelector('.bigImg');
		//大图片最大移动距离
		var bigXMax = bigIMg.offsetWidth - big.offsetWidth;
		var bigYMax = bigIMg.offsetHeight - big.offsetHeight;
		//大图片移动距离
		var bigX = maskX * bigXMax / maskXMax;
		var bigY = maskY * bigYMax / maskYMax;
		bigIMg.style.left = -bigX + 'px';
		bigIMg.style.top = -bigY + 'px';
		
	})
})